import { useMemo, useRef } from 'react';
import { Link, useNavigate } from 'react-router-dom';

import { Avatar, Badge, Dropdown, Menu, Tooltip } from 'antd';
import { observer } from 'mobx-react-lite';

import Notice, { NoticeRef } from '@/components/notice';

import { useStore } from '@/store';
import { useLayoutStore } from '@/store/layout';

import { Icon } from '@iconify/react';

import styles from './index.module.scss';

export type HeaderProps = {};

const Header: React.FC<HeaderProps> = () => {
  const store = useStore();
  const layoutStore = useLayoutStore();
  const navigate = useNavigate();
  const notice = useRef<NoticeRef>(null);

  const onLogout = () => {
    store.app?.modal.confirm({
      title: '确认退出',
      content: '确定要退出当前账户吗？',
      onOk: async () => {
        await store.logout();
      }
    });
  };

  const onNotice = () => {
    notice.current?.open();
  };

  const tag = useMemo(() => {
    const tag = store.config['网站标题']?.configValue;

    if (typeof tag == 'string' && tag) {
      const lastAscii = tag.charCodeAt(tag.length - 1);
      const colorList = ['#F6AC2D', '#2db7f5', '#87d068', '#108ee9', '#f04134'];
      const color = colorList[lastAscii % colorList.length];

      return {
        tag,
        color
      };
    }

    return null;
  }, [store.config]);

  return (
    <>
      <div className={styles['header']}>
        {/* logo */}
        <Link to="/" className={styles['logo']}>
          <div className={styles['logo-inner']}>
            <img src="/logo.png" alt="logo" />
          </div>
          <div className={styles['logo-title']}>{import.meta.env.VITE_TITLE}</div>
        </Link>
        {/* end logo */}

        <div className={styles['menu']}>
          <Menu
            className={styles['menu-inner']}
            theme="dark"
            mode="horizontal"
            items={layoutStore.rootMenu}
            selectedKeys={layoutStore.rootSelectedKeys}
          />
        </div>

        <div className={styles['header-right']}>
          {tag && <div className={styles['header-tag']}>{tag?.tag}</div>}

          <Tooltip title="通知">
            <Badge count={store.unreadCount} offset={[-5, 5]} size="small">
              <div className={styles['header-action']} onClick={onNotice}>
                <Icon icon="ri:notification-3-fill" />
              </div>
            </Badge>
          </Tooltip>

          <Tooltip title="系统设置">
            <div
              onClick={() => {
                navigate('/setting');
              }}
              className={styles['header-action']}
            >
              <Icon icon="ri:settings-3-fill" />
            </div>
          </Tooltip>

          <Dropdown
            overlayClassName={styles['dropdown-menu']}
            menu={{
              items: [
                {
                  label: '基本信息',
                  key: '基本信息',
                  icon: <Icon icon="ri:user-3-fill" />,
                  onClick: () => {
                    navigate('/person/info');
                  }
                },
                {
                  type: 'divider'
                },
                {
                  label: '版本 v1.0.2',
                  icon: <Icon icon="ri:layout-horizontal-fill" />,
                  key: 'version'
                },
                {
                  type: 'divider'
                },
                {
                  label: '退出',
                  key: '退出',
                  icon: <Icon icon="ri:logout-box-r-fill" />,
                  onClick: onLogout
                }
              ]
            }}
            trigger={['click']}
          >
            <Tooltip title={store.displayName}>
              <Avatar size={32} src={store.avatar} className={styles['avatar']}>
                {store.displayName}
              </Avatar>
            </Tooltip>
          </Dropdown>
        </div>
      </div>

      <Notice ref={notice} />
    </>
  );
};

export default observer(Header);
